<template>
    <div>
        <div class="vs-table-box">
            <h3>商品出库</h3>
            <el-form label-position="right" v-loading="loading" :rules="rules" ref="ruleForm" class="vs--info"  label-width="130px" :model="ruleForm">
                <el-form-item label="商品："  :inline="true" prop="goods_id">
                    <el-select clearable filterable :disabled="type==1" @change="changeGoods" v-model="ruleForm.goods_id" placeholder="请选择">
                        <el-option v-for="item in goodsList" :key="item.id" :label="item.title" :value="item.id"> </el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item v-if="ruleForm.id" label="商品规格：" prop="sku.stock" :inline="true" >
                    <el-descriptions border>
                        <el-descriptions-item label="规格名">{{ruleForm.sku.sku_text}}</el-descriptions-item>
                        <el-descriptions-item label="库存">
                                <el-input v-model="ruleForm.sku.stock" placeholder="请输入库存"></el-input>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-form-item> -->
                <el-form-item label="商品规格：" :inline="true" prop="username">
                    <el-table ref="sku" :data="ruleForm.sku">
                        <el-table-column v-if="type!=1" width="70px" type="selection"></el-table-column>
                        <el-table-column label="规格名">
                            <template slot-scope="scope">
                                {{scope.row.sku_text}}
                            </template>
                        </el-table-column>
                        <el-table-column label="剩余库存">
                            <template slot-scope="scope">
                                {{scope.row.max_stock}}
                            </template>
                        </el-table-column>
                        <el-table-column label="出库库存">
                            <template slot-scope="scope" >
                                <el-input v-model.number="scope.row.stock" @blur="scope.row.stock<1?scope.row.stock=1:''" :readonly="type==1" placeholder="请输入库存"></el-input>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
                <el-form-item label="出库类型：" :inline="true" prop="type">
                   <el-select clearable filterable :disabled="type==1" v-model="ruleForm.type" placeholder="请选择">
                        <el-option label="退货出库" :value="1"> </el-option>
                        <el-option label="调拨出库" :value="2"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="入库门店：" :inline="true" prop="store_id">
                   <!-- <el-input :readonly="type==1" v-model="ruleForm.store_id"></el-input> -->
                    <el-select v-model="ruleForm.store_id" clearable placeholder="请选择">
                        <el-option
                            v-for="item in shopList"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注：" :inline="true" prop="remarks">
                   <el-input :readonly="type==1" type="textarea" :rows="6" v-model="ruleForm.remarks"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button v-if="type!=1" :loading="isBtn" type="primary" @click="submitForm()">提交</el-button>
                    <el-button @click="utils.backPage()">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import VsUploading from '@/components/VsUploading'
export default {
    components:{
        VsUploading
    },
    data(){
        return{
            type:1,     //1:详情    2:添加  3:编辑
            id:0,
            loading:false,
            isBtn:false,
            ruleForm:{
                goods_id:'',//
                sku:[],
                type:'',
                store_id:"",
                remarks:'',
            },
            shopList:[],
            goodsList:[],
            rules:{
                goods_id: { required: true, message: '请选择商品', trigger: 'change' },
                type: { required: true, message: '请选择出库库类型', trigger: 'change' },
                store_id: { required: true, message: '请选择出库门店', trigger: 'change' },
                sku:{
                    stock: { required: true, message: '请输出库存', trigger: 'blur' },
                },
                // remarks: { required: true, message: '请输入备注', trigger: 'blur' },
            },
        }
    },
    async created(){
        if(this.$route.path == '/comeStorageInfo'){
            let {type,id} = this.$route.query;
            if(type){
                this.type = type;
                // this.$route.meta.title = this.xin.typeTitle(type)+'商品'
            }
            this.ruleForm.id = id;
            await this.getGoods();
            this.homegetStore();
            if(id){
                this.getWarehousing(id);
            }
            console.log( this.ruleForm.id,' this.ruleForm.id');
        }
    },
    methods:{
        async homegetStore(){
            let {code,data} = await this.$Http.homegetStore();
            if(code){
                this.shopList = data;
            }
        },
        async getWarehousing(id){
            this.loading = true;
            let {code,data} = await this.$Http.getWarehouse({id});
            this.loading = false;
            if(code){
                // data.sku = this.goodsList.filter(v=>{
                //     v.
                // })
                // data.sku.stock = data.stock;
                console.log(data,'datadatadata');
                let list = data.goods.sku.filter(v=>{
                    for(let v2 of data.wareSku){
                        if(v2.sku_id == v.id){
                            v.max_stock = v.stock;
                            v.stock = v2.stock;
                            return v;
                        }
                    }
                })
                let sku = this.goodsList.find(v=>v.id==data.goods_id).sku;
                console.log(sku,'sku',list);
                if(this.type==1){
                    sku = list;
                }else{
                    sku = sku.map(v=>{
                        v.stock = ""
                        for(let v2 of list){
                            if(v2.id == v.id){
                                v = v2;
                                this.$nextTick(()=>{
                                    this.$refs.sku.toggleRowSelection(v);
                                })
                            }
                        }
                        return v;
                    })
                }
                this.ruleForm = {
                    id,
                    goods_id:data.goods_id,//
                    sku,
                    type:data.type,
                    store_id:data.store_id,
                    remarks:data.remarks,
                };
                // this.$nextTick(()=>{
                //     this.$refs.sku.toggleAllSelection();
                // })
                console.log(this.ruleForm,'this.ruleForm');
            }
        },
        async getGoods(){
            let { code, data } = await this.$Http.getGoods({is_all:1,store_id:0});
            if(code){
                this.goodsList = data;
            }
        },
        changeGoods(e){
            let goods = this.goodsList.find(v=>v.id==e)
            this.ruleForm.sku = goods.sku.map(v=>{
                v.max_stock = v.stock;
                v.stock = '';
                return v;
            });
        },
        submitForm(){
            this.$refs['ruleForm'].validate(async (valid) => {
                if (!valid)return;
                let {goods_id,type,store_id,id,sku,remarks} = this.ruleForm;
                // if(id){
                //     var arr = [{sku_id:sku.id,stock:sku.stock}];
                // }else{
                    var list = this.$refs.sku.selection,arr=[];
                    if(list.length==0)return this.$message.error('请选择出库的商品规格')
                    console.log(list,'list');
                    for(let val of list){
                        if(!val.stock){
                            return this.$message.error('规格库存不能为空!')
                        }else{
                            arr.push({
                                sku_id:val.id,
                                stock:val.stock
                            })
                        }
                    }
                this.isBtn = true;
                let {code} = await this.$Http.setWarehouse({
                    id,
                    goods_id,//
                    type,
                    store_id,
                    remarks,
                    sku:JSON.stringify(arr)
                });
                this.isBtn = false;
                if(code){
                    this.$message.success(this.ruleForm.id?'修改成功':'添加成功');
                    this.utils.backPage();
                }
            });
        },
    }
};
</script>

<style lang="scss" scoped>

</style>